<template>
  <el-form label-width="80px">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="年度">
          <el-select
            v-model="filter.year"
            size="small"
            style="width: 100%"
            placeholder=""
            @change="updateData"
          >
            <el-option
              v-for="item in yearsList"
              :key="item"
              :label="item + '年度'"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="计分周期">
          <el-select
            v-model="filter.cycle"
            size="small"
            style="width: 100%"
            placeholder=""
            @change="updateData"
          >
            <el-option label="不限" :value="null"></el-option>
            <el-option
              v-for="item in cycleList"
              :key="item"
              :label="'第' + item + '轮'"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="科室">
          <el-select
            v-model="filter.office"
            size="small"
            style="width: 100%"
            placeholder=""
            @change="updateData"
          >
            <el-option label="不限" value=""></el-option>
            <el-option
              v-for="item in params.userAttribs.exerciseOffice"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item>
          <el-button size="small" type="primary" @click="$emit('create')">
            <i class="el-icon-plus"></i>
            <span>添加练习模板</span>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "filterPanel",
  data() {
    return {
      filter: {
        year: new Date().getFullYear(),
        cycle: null,
        office: "",
      },
    };
  },
  computed: {
    params() {
      return this.$store.state.params;
    },
    userList() {
      return this.$store.state.userList;
    },
    yearsList() {
      let list = new Array();
      for (let i = 1; i >= -2; i--) {
        list.push(new Date().getFullYear() + i);
      }
      return list;
    },
    cycleList() {
      let list = new Array();
      for (let i = 1; i <= 10; i++) {
        list.push(i);
      }
      return list;
    },
  },
  methods: {
    updateData() {
      this.loading = true;
      let filter = [];
      Object.keys(this.filter).map((key) => {
        filter.push({
          key: key,
          value: this.filter[key],
        });
      });
      this.$store
        .dispatch("queryExercises", filter)
        .then(() => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.updateData();
  },
};
</script>
